<template>
    <div class="main">
        <vHeader title="修改登录密码" @return="$router.go('-1')" />
        <div class="content">
            <div class="box">

                <div class="row" style="margin-top: 30px;">
                    <div class="top">
                        <img class="icon" src="../assets/images/safeCenter/password.png" />
                        <p>旧密码</p>
                    </div>
                    <div class="bottom">
                        <div class="right" style="padding-left: 0;">
                            <input :type="hide1 ? 'password' : 'text'" placeholder="请输入当前使用密码" />
                            <div class="code" @click="hide1 = !hide1">
                                <img class="icon" :class="hide1 ? '' : 'flip'" src="../assets/images/safeCenter/hide.png" />
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row" style="margin-top: 30px;">
                    <div class="top">
                        <img class="icon" src="../assets/images/safeCenter/password.png" />
                        <p>新密码</p>
                    </div>
                    <div class="bottom">
                        <div class="right" style="padding-left: 0;">
                            <input :type="hide2 ? 'password' : 'text'" placeholder="请设置您的登录密码" />
                            <div class="code" @click="hide2 = !hide2">
                                <img class="icon" :class="hide2 ? '' : 'flip'" src="../assets/images/safeCenter/hide.png" />
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row" style="margin-top: 30px;">
                    <div class="top">
                        <img class="icon" src="../assets/images/safeCenter/password.png" />
                        <p>确认密码</p>
                    </div>
                    <div class="bottom">
                        <div class="right" style="padding-left: 0;">
                            <input :type="hide3 ? 'password' : 'text'" placeholder="请再次设置登录密码" />
                            <div class="code" @click="hide3 = !hide3">
                                <img class="icon" :class="hide3 ? '' : 'flip'" src="../assets/images/safeCenter/hide.png" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="button" :class="isActive ? 'active' : ''">
                确认
            </div>

            <div class="safe">
                <div class="img">
                    <img class="icon" src="../assets/images/bindPhone/safe.png" />
                </div>
                <p>98PAY保障您的信息安全</p>
            </div>
        </div>


        <van-popup v-model="showPicker" round position="bottom">
            <van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
        </van-popup>
    </div>
</template>

<script>
import api from "@/api/center";
import {
    mapState,
} from "vuex";
export default {
    data() {
        return {
            hide1: true,
            hide2: true,
            hide3: true,
            showPicker: false,
            isActive: false, //是否能激活按钮
            columns: ['+1 (美国)', '+86 (中国)', '+88 (中国台湾)'],
        }
    },
    computed: {
        ...mapState({
            loginUserinfo: state => state.global.loginUserinfo,
            baseData: state => state.global.baseData
        }),
    },
    methods: {
        onConfirm(value, index) {
            this.showPicker = false
            this.$toast(`当前值：${value}, 当前索引：${index}`);
        },

        //获取验证码
        getCode() {
            let _this = this
            function beforeClose(action, done) {
                if (action === 'confirm') {
                    _this.sendCode()
                    setTimeout(done, 1000);
                } else {
                    done();
                }
            }
            this.$dialog.confirm({
                title: '温馨提示',
                message: '请确认是否发送验证码？',
                confirmButtonText: '确认发送',
                beforeClose,
            });
        },
        //执行发送验证码
        sendCode() {
            console.log("send code")
        }
    },
    mounted() { },
}
</script>

<style lang="scss" rel="stylesheet/scss" type="text/scss" scoped>
* {
    box-sizing: border-box;
}

.main {
    width: 100vw;
    height: 100vh;
    overflow-y: auto;

    .content {
        min-height: calc(100vh - 1.44rem);
        background-color: #F0F5FD;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 15px 15px;
        position: relative;

        .box {
            width: 100%;

            background: #ffffff;
            border-radius: 8px;
            padding: 15px;

            .row {
                .top {
                    display: flex;
                    align-items: center;

                    p {
                        font-size: 13px;
                        font-weight: 500;
                        color: #444444;
                    }

                    img {
                        width: 17px;
                        height: 17px;
                        margin-right: 8px;
                    }
                }

                .bottom {
                    width: 315px;
                    height: 46px;
                    margin-top: 12px;
                    background: #f0f5fd;
                    border-radius: 5px;
                    display: flex;
                    align-items: center;
                    padding: 7px 15px;

                    .left {
                        width: 60px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        p {
                            font-size: 14px;
                            color: #222222;
                        }

                        .line {
                            height: 15px;
                            width: 1px;
                            background-color: #9eacb3;
                        }
                    }

                    .right {
                        flex: 1;
                        display: flex;
                        align-items: center;
                        padding-left: 10px;
                        height: 100%;
                        position: relative;

                        .code {
                            position: absolute;
                            right: 0;
                            font-size: 14px;
                            color: #afb1b3;
                            cursor: pointer;

                            img {
                                /* 图片的初始状态 */
                                transition: transform 0.5s;
                                /* 添加过渡效果，使翻转更平滑 */
                            }

                            .flip {
                                /* 翻转图片 */
                                transform: rotate(180deg);
                            }
                        }

                        input {
                            border: none;
                            background-color: transparent;
                            font-size: 14px;
                            color: #222222;
                            width: 100%;

                            &::placeholder {
                                color: #afb1b3;
                            }
                        }
                    }
                }
            }
        }

        .button {
            width: 345px;
            height: 44px;
            background: #c0c5ca;
            border-radius: 4px;
            margin-top: 20px;
            line-height: 44px;
            text-align: center;
            font-size: 14px;
            color: #ffffff;



            &.active {
                background: #479fff;

                &:active {
                    background: #68aefa;
                }
            }
        }


        .safe {
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: center;

            P {
                font-size: 14px;
                text-align: center;
                color: #afb1b3;
            }

            .img {
                width: 12px;
                height: 14px;
                margin-right: 5px;
            }

        }
    }

}
</style>